<template>
    <div class="history">
        <Delete @click="clearAll" class="delete"></Delete>
        <EmptyVideo class="empty" v-show='!historyPlaylist.length'></EmptyVideo>
        <div class="videos">
            <div :class="{ item: true, active: playVideoId === item.uid }" v-for="item in historyPlaylist"
                :key="item.uid" @click="playVideo(item)" :title="item.path">
                <div class="path every">
                    <div class="title">
                        视频路径：
                    </div>
                    <div class="content">
                        {{ item.path }}
                    </div>
                </div>
                <div class="every">
                    <div class="title">
                        视频名称：
                    </div>
                    <div class="content">
                        {{ item.name }}
                    </div>
                </div>
                <div class="every">
                    <div class="title">
                        记忆时长：
                    </div>
                    <div class="content">
                        {{ calculateHours(item.currentTime) }}
                    </div>
                </div>
                <div class="every">
                    <div class="title">
                        视频时长：
                    </div>
                    <div class="content">
                        {{ calculateHours(item.duration) }}
                    </div>
                </div>
                <div class="every">
                    <div class="title">
                        播放进度：
                    </div>
                    <div class="percentage">
                        <div class="playProgress">
                            <div class="progress"
                                :style="{ width: calculateProgress(item.currentTime, item.duration) + '%' }"></div>
                            <div class="all"></div>
                        </div>
                        <div class="text">{{ calculateProgress(item.currentTime, item.duration) }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { playerInfoStore } from '@renderer/store/playerInfo'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import _ from 'lodash'
import Delete from '@renderer/components/icons/delete.vue'
import EmptyVideo from '@renderer/components/icons/emptyVideo.vue'
const playerInfo = playerInfoStore()
const playVideoId = ref<string>('')
const { historyPlaylist } = storeToRefs(playerInfo)
const $emits = defineEmits(['playInfo'])
const playVideo = (item: any) => {
    playVideoId.value = item.uid
    $emits('playInfo', {
        item,
        videos: historyPlaylist.value
    })
}
const calculateHours = (item: number) => {
    // 把秒数转换为小时、分钟和秒数
    let hours: any = Math.floor(item / 3600)
    let minutes: any = Math.floor((item % 3600) / 60)
    let seconds: any = item % 60
    // 个位数的话 补零
    hours < 10 ? hours = `0${hours}` : hours = `${hours}`
    minutes < 10 ? minutes = `0${minutes}` : minutes = `${minutes}`
    seconds < 10 ? seconds = `0${seconds}` : seconds = `${seconds}`
    let str = ''
    hours === '00' ? str = `${minutes}:${seconds}` : str = `${hours}:${minutes}:${seconds}`
    return str
}
const calculateProgress = (now: number, all: number) => {
    return Math.floor(now / all * 100)
}
const clearAll = () => {
    historyPlaylist.value = []
}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.history {
    padding: 5px;
    @include mixin.scroll_bar();
    flex: 1;

    .videos {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

        .item {
            padding: 5px 10px;
            position: relative;
            cursor: pointer;
            @include mixin.box_shadow();

            .title {
                font-weight: bold;
            }


            .every {
                display: grid;
                grid-template-columns: 80px 1fr;
                margin: 5px 0;
                font-size: 14px;

                .content {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .percentage {
                    display: grid;
                    grid-template-columns: 1fr 50px;

                    .playProgress {
                        position: relative;

                        .progress {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            height: 10px;
                            background: linear-gradient(to right, #29f, #68fffc);
                            border-radius: 5px;
                            left: 0;
                            z-index: 5;
                        }

                        .all {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 100%;
                            height: 10px;
                            background-color: #cccccc4e;
                            border-radius: 5px;
                            left: 0;
                        }
                    }

                    .text {
                        text-align: center;
                    }
                }
            }

            &:hover {
                transition: all 0.3s;
                box-shadow: 0 0 5px 2px #29f !important;
            }
        }

        .active {
            transition: all 0.3s;
            box-shadow: 0 0 5px 2px #29f !important;
        }
    }

    .delete {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        z-index: 10;
        opacity: 0.3;
        transition: all 0.5s;

        &:hover {
            opacity: 1;
        }
    }

    .empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>